<template>
    <div class="index">
        <div class="introduction-box" v-for="(item, o) in introduction" :key="o">
            <h1 v-if="item.title" v-html="item.title"></h1>
            <template v-if="(item.content || []).length">
                <div class="introduction-cont" v-for="(c, k) in item.content" :key="k">
                    <div class="cont-text" v-if="c" v-html="c"></div>
                </div>
            </template>
            <template v-if="(item.children || []).length">
                <div class="introduction-child-box" v-for="(d, i) in item.children" :key="i">
                    <h2 v-if="d.title" v-html="d.title"></h2>
                    <template v-if="(d.describes || []).length">
                        <div class="child-des" v-for="(m, n) in d.describes" :key="n">
                            <li class="child-des-text" v-if="m" v-html="m"></li>
                        </div>
                    </template>
                    <div class="child-cont-box" v-if="(d.content || []).length">
                        <div class="child-cont" v-for="(c, j) in d.content" :key="j">
                            <div class="child-cont-text" v-if="c" v-html="c"></div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
        <el-backtop target=".main-container"></el-backtop>
    </div>
</template>

<script>
export default {
    name: 'IndexPage',
    data() {
        return {
            introduction: [
                {
                    title: 'sibionics-ui-next 是什么？',
                    children: [
                        {
                            title: '框架介绍',
                            describes: [],
                            content: [
                                `<span class="s-code">sibionics-ui-next</span>是基于<span class="s-code-gray">vue@3.x + element-plus@2.x</span>开发的一个<span class="s-code-gray">UI</span>框架，
                                其核心组件是围绕<span class="s-code-gray">Table表格</span>、<span class="s-code-gray">Form 表单</span>及<span class="s-code-gray">FormItem 表单项</span>
                                封装的极具便利性的<span class="s-code-gray">SibTable</span>、<span class="s-code-gray">SibFrom</span>、<span class="s-code-gray">SibItem</span>；其中还包含许多便利性的方法。
                                该框架的核心目的是以<span class="s-code-8">高效的配置来驱动业务视图</span>，从而使得开发者在后台管理项目开发过程中的开发效率得到大幅的提升。`,
                            ],
                        },
                        {
                            title: '框架优点',
                            describes: [
                                '简单、灵活、轻便、高效',
                                '维护成本低',
                                '不必关注数据请求过程',
                            ],
                            content: [
                                '它能够大幅减少了开发过程中的代码量，尤其是模板层；同时，组件内部封装了大量常用基础逻辑，也支持外部灵活配置调整，便利程度比较高；',
                                '框架核心目的是希望使用配置参数生成页面模块，对照API使用开发，能大幅提升开发效率，并且API接口言简意赅，使用简单；并且它的出现也能够降低组件的维护成本，以往将组件库初始化到每个项目的 components 内，然而当组件进行bug修复或者迭代更新时，往往会出现维护困难的问题；',
                                '框架内部在对数据进行接口请求做了较好的封装，大部分组件内置了接口请求逻辑，只需要配置相关axios支持的参数，即可自动请求接口获取数据并渲染；',
                            ],
                        },
                        {
                            title: '框架文档地址',
                            describes: [],
                            content: [
                                // eslint-disable-next-line max-len
                                '<span class="s-code"><a href="http://bearsee.com.cn/sibionics-ui-next/#/introduction" target="_blank">http://bearsee.com.cn/sibionics-ui-next/#/introduction</a></span>',
                            ],
                        },
                    ],
                },
                {
                    title: '它能解决什么问题？',
                    children: [
                        {
                            title: '将 Vue 的核心理念 以数据驱动视图 升华为 以配置驱动视图',
                            describes: [],
                            content: [
                                `以往，当我们在写一个<span class="s-code-gray">form 表单</span>时，由于表单项类型不一样，有的是下拉框，
                                有的是选择器，有的是输入框等等，导致我们不太方便使用 v-for，
                                而不得不根据每一个表单项去编写其对应的<span class="s-code-gray">template</span>。
                                之后，我希望通过这个框架能够做到使我们再也不必去关注
                                <span class="s-code-gray">&lt;el-form&gt;、&lt;el-form-item&gt;、&lt;el-checkbox&gt;</span>等代码的编写，
                                也不用管模板层到底如何遍历，我们只需要提供自己想要生成的对应表单的配置项，便可自动生成相关模块。
                                当然，框架内提供了丰富的配置字段和插槽入口，用以实现特殊拓展。
                                同样地，在编写列表增删改查的页面时，该框架也做了极具便利的组件封装，使用&lt;sib-table&gt;组件来编写后台管理系统相关页面，是真真实实的能使你事半功倍`,
                            ],
                        },
                        {
                            title: '能够实现自处理后端接口的调用，告别繁琐的接口请求逻辑的编写',
                            describes: [],
                            content: [
                                `在代码编写过程中，一般会存在较多与后端交互的场景。例如某个下拉框的值是从后台接口获取。
                                在以往，我们使用的方式一般是声明获取数据的<span class="s-code-gray">function</span>，在该方法里调用后端接口获取相关数据，然后修改变量的值，渲染视图。
                                这样的做法在我看来属实过于僵硬。因此，框架内部所有涉及到接口请求的地方，均提供<span class="s-code-gray">requestConfig</span>字段用于声明接口请求的相关配置，
                                如果你配置了<span class="s-code-gray">requestConfig</span>，那么你再也不需要手动去获取数据然后再去赋值了，也无需关注内部针对接口调用所做的一切操作，
                                更不必担心它达不到你预期的效果，因为该字段除了支持预定义的内置参数，同时还支持接收<span class="s-code-gray">axios</span>所有可配置参数。`,
                            ],
                        },
                    ],
                },
            ],
        };
    },
};
</script>

<style lang="scss">

.index {
    padding-top: 0 !important;
    padding-bottom: 50px;
    .introduction-box {
        h1 {
            color: var(--el-color-primary);
            font-size: 24px;
        }
        .introduction-cont {
            .cont-text {

            }
        }
        .introduction-child-box {
            h2 {
                color: #666;
                display: flex;
                &::before {
                    content: "";
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    background: #666;
                    margin: auto 0;
                    margin-right: 5px;
                }
            }
            .child-des {
                margin: 8px 0;
                .child-des-text {
                    font-size: 16px;
                    color: #666;
                    line-height: 1;
                }
            }
            .child-cont-box {
                margin-top: 20px;
                .child-cont {
                    .child-cont-text {
                        line-height: 1.5;
                        margin: 6px 0;
                        // text-indent: 2em;
                    }
                }
            }
        }
    }
}
</style>
